<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <script th:src="@{/lib/markdownlib/prettify.min.js}"></script>
    <script th:src="@{/lib/markdownlib/marked.min.js}"></script>
    <script th:src="@{/js/editormd.min.js}"></script>
    <script th:src="@{/lib/bootstrap/js/bootstrap.js}"></script>
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/editormd.preview.min.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/question.css}">

    <title th:text="${ask.title}+' - 倪风的博客'"></title>
</head>
<body>
<div th:replace="index/command :: nav"></div>

<div class="main container">
    <div class="col-md-9 col-sm-12 col-xs-12">
        <div style="background-color: white;padding:15px;overflow: auto;">
            <h4 th:text="${ask.title}">问题标题</h4>
            <span class="text-desc">
                作者：<span th:text="${ask.name}"></span> |
                发布时间：<span th:text="${#dates.format(ask.create_date,'yyyy-MM-dd HH:mm')}">2019-09-07 19:48</span> |

                阅读数： <span th:text="${ask.visit}">13</span>
            </span>
            <hr>
            <div id="question-view" th:text="${ask.content}"></div>
            <script>
                var obj = document.getElementById("question-view");
                //alert(obj.innerText);//这样就自动解析了
                obj.innerHTML = obj.innerText;//这样重新设置html代码为解析后的格式
            </script>
            <hr>
            <div>
                <span class="label label-info question-tag" th:each="tag : ${tags}">
                    <span class="glyphicon glyphicon-tags"></span>
                    <span class="label label-info" th:text="${tag}">java</span>
                </span>
            </div>
            <hr>
            <div th:if="${session.currentUser} != null">
                <a th:href="|/discuss/ask/${ask.id}|" class="community-menu"  th:if="${session.currentUser.username} == ${ask.username}">
                    <span style="font-size: 12px;" class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</span>
                </a>
            </div>

            <hr>
            <div id="cyEmoji" role="cylabs" data-use="emoji"></div>
            <!-- 代码2：用来读取评论框配置，此代码需放置在代码1之后。 -->
            <!-- 如果当前页面有评论框，代码2请勿放置在评论框代码之前。 -->
            <!-- 如果页面同时使用多个实验室项目，以下代码只需要引入一次，只配置上面的div标签即可 -->
            <script type="text/javascript" charset="utf-8" src="https://changyan.itc.cn/js/lib/jquery.js"></script>
            <script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cyt6FqlPe"></script>
            <hr>

            <h3>评论</h3>

            <div class="command-user">
                <div shiro:user="">
                    <a href="#"><img class="img-user" th:src="${session.currentUser.img}"></a>
                    <span><shiro:principal property='name'/>：</span>
                </div>

                <a href="/login" shiro:guest=""><div node-type="header-login" class="header-login">登录</div></a>
            </div>
            <div id="comment_section">
                <input type="hidden" id="question_id" value="243">
                <textarea class="form-control comment" rows="6" id="comment_content" placeholder="有事没事说两句..."></textarea>
                <button type="button" class="btn btn-success btn-comment" style="margin-top: 5px;" onclick="askAnswer()">发布评论</button>
            </div>

            <hr>
            <h4><span th:text="${askCount}">1</span>个回复</h4>
            <hr>
            <div class="comments">
                <div class="media" th:each="answer : ${answers}">
                    <div class="media-left">
                        <a th:href="|/person/${answer.uid}|">
                            <img class="media-object img-rounded" th:src="${answer.img}">
                        </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">
                            <span th:text="${answer.name}">倪风</span>
                        </h5>
                        <div th:text="${answer.content}">我错误的意思是，你运行 flyway 的时候数据库已经有表了，需要运行一次 mvn flyway:baseline 命令，把当前的数据库版本做一下基线</div>
                        <div class="menu">
                            <span class="pull-right" th:text="${#dates.format(answer.create_date,'yyyy-MM-dd HH:mm')}" style="color: #999999;font-size: 14px;">2019-09-07</span>
                        </div>

                    </div>
                </div>

            </div>
            <a href="/" style="color: #0a001f"> <div style="float: right;margin: 20px auto;">codetip官网</div></a>

        </div>
    </div>

    <div class="col-md-3 col-sm-12 col-xs-12 main-right">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h4>发起人：</h4>
            <div>
                <div class="media-left">
                    <a th:href="|/person/${ask.uid}|">
                        <img class="media-object img-rounded" th:src="${ask.img}">
                    </a>
                </div>
                <div class="media-body">
                    <h5>
                        昵称：<span th:text="${ask.name}">倪风</span>
                    </h5>
                </div>
            </div>
        </div>
        <hr class="col-lg-12 col-sm-12 col-xs-12">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <h4>倪风的博客</h4>
            <img class="img-thumbnail" src="/images/wx.jpg">
        </div>
    </div>
</div>

<div th:replace="index/command :: footer"></div>
<script>
    function askAnswer() {
        var answerContent = $("#comment_content").val();
        var ask_id = [[ ${ask_id} ]];
        if ($("#usernameDisplay").length>0){
            $.post('/askAnswer',{
                "content":answerContent,
                "askId":ask_id
            },function (result) {
                if (result){
                    window.location.reload();
                }else {
                    alert("回复错误")
                }
            });
        }else {
            alert("请登入后操作")
        }
    }
</script>
</body>
</html>